import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { WingBlank, WhiteSpace, Card, Flex, SwipeAction, ActivityIndicator} from 'antd-mobile';
import { GENDER_MAP } from 'const';

class ReportListPage extends Component{
    constructor(props) {
      super(props);
      this.state= {
        isLoading: true
      }
    }

    componentDidMount() {
      setTimeout(() => {
        this.setState({
          isLoading: false,
        });
      }, 600);
    }

    render(){
        const {  reports, location } = this.props;
        window.scrollTo(0, 0);
        for (var i = reports.length - 1; i >= 0; i--) {
 
        let Birth, create;
        if(reports[i].birthday){
          Birth = reports[i].birthday.replace(/-/g, "/");
        }
        if(reports[i].createTime){
          create = reports[i].createTime.replace(/-/g, "/");
        }
        let Agetime = reports[i].age;
        let Ages = "", time = new Date(create),times = new Date(Birth);// new Date()在iOS 上的兼容处理
        let newYear = time.getFullYear(), oldYear = times.getFullYear();
        let newMonth = time.getMonth()+1; let oldMonth = parseInt(times.getMonth())+1;
        let newDay = time.getDate(), oldDay = times.getDate();
        let year = newYear - oldYear,Today = newDay - oldDay, month = newMonth - oldMonth; // 天 // 月;
        if(Agetime >= 1){
          Ages = Agetime + '岁'
        }else{
          if(year == 0){
            if(month >= 1){  
                  Ages = month+ '月';  
              }else{
                if(month < 1&&Agetime <=0){
                  Ages = Today+ '天';
                }
              }
          }else{
              let m1 = 12 - oldMonth;
              let r1 = 31 - oldDay;
              Ages = m1 + newMonth + '月' ;
              if(m1 == 0){
                if (newMonth ==1 ) {
                  Ages = r1 + newDay;
                  if (Ages>=31) {
                    Ages = 1+'月';
                  }else{
                    Ages += '天';
                  }
                }
              }
              
          }
        }
        reports[i].EvaAge = Ages; 
      }
      return(
        <WingBlank size="md">
          {this.state.isLoading ?  
          <Flex justify="center" style={{ margin: "50px 0" }} >
                  <ActivityIndicator size="large" animating />
          </Flex>: 
           reports&& reports.length == 0? 
           <div>
             <Flex justify="center" style={{ margin: "50px 0" }} >
               <img src={require('../../../assets/nodata.png')} /> 
             </Flex> 
             <Flex justify="center" style={{ color: '#aa4929', margin: "50px 0" }} >
               暂无测评纪录
             </Flex>
           </div>
           :
           reports.map((report, i) =>
            <Link
              key={i}
              to={{
                pathname: `${location.pathname}/${report.uid}`,
                query: { eva: report.eva },
                state: { title: report.title, report },
              }}>
              <WhiteSpace />
              <Card className="record-card">
                <Card.Header
                  title={
                    <div>
                      <span style={{ 
                        overflow:'hidden',
                        textOverflow:'ellipsis',
                        whiteSpace:'nowrap',
                        display: 'inline-block', 
                        width: 305 }}>
                        {report.name}
                        <small style={{ marginLeft: 20 }}>({report.relation})</small>
                      </span>
                    </div>
                    
                  } 
                  extra={
                    <div style={{ width: 200, textAlign: 'center'}}>
                        <span style={{ marginRight: 30 }}>{GENDER_MAP[report.gender]}</span>
                        <span>{report.EvaAge}</span>
                    </div>
                  }
                  />
        
                <Card.Footer
                  content={
                    <div>
                      <img
                        width="28"
                        src={require('assets/icons/icon-healthy.svg')} />
                      <span>
                        {report.title}
                      </span>
                    </div>
                  }
                  extra={report.createTime} />
              </Card>
            </Link>
          )} 
          <WhiteSpace />
        </WingBlank>
      )
    }
}

export default connect(({ report }) => ({
  ...report,
}))(ReportListPage);
